<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
    <title></title>
</head>
<body>
<div id="chart" style="width:100%;height:100%"></div>
<script>
    var chart;
    var longPressTimer;
    var longPressDuration = 500; // 长按判定时间(毫秒)
    function initChart(xData, yData) {
        chart = echarts.init(document.getElementById('chart'));

        chart.setOption({
            xAxis: { data: xData },
            yAxis: {},
            series: [{
                data: yData.map((v,i) => ({
                    value: v,
                    name: xData[i]
                })),
                type: 'bar',
                emphasis: { itemStyle: { shadowBlur: 10 } }
            }]
        });

        chart.on('click', function(params) {
            if(window.ChartEventHandler) {
                ChartEventHandler.onEvent('click', JSON.stringify({
                    dataType: params.dataType,
                    name: params.name,
                    value: params.value,
                    seriesName: params.seriesName,
                    componentType: params.componentType
                }));
            }
        });

        // 长按事件处理
        chart.getZr().on('mousedown', function(params) {
            longPressTimer = setTimeout(function() {
                var pointInPixel = [params.offsetX, params.offsetY];
                if(chart.containPixel('grid', pointInPixel)) {
                    var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
                    var dataIndex = chart.convertFromPixel('series', pointInPixel)[0];
                    if(window.ChartEventHandler) {
                        ChartEventHandler.onEvent('longpress',JSON.stringify({
                            dataIndex: dataIndex,
                            x: pointInGrid[0],
                            y: pointInGrid[1]
                        }));
                    }
                }
            }, longPressDuration);
        });

        chart.getZr().on('mouseup', function() {
            clearTimeout(longPressTimer);
        });

    }

    function updateChart(newXData, newYData) {
        if(chart && !chart.isDisposed()) {
            chart.setOption({
                xAxis: { data: newXData },
                series: [{
                    data: newYData.map((v,i) => ({
                        value: v,
                        name: newXData[i]
                    }))
                }]
            });
        }
    }
</script>
</body>
</html>